<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page session="false" %>
<html>
<head>
	<title>View Order / Quotation</title>

	<SCRIPT TYPE="text/javascript">
	
	</SCRIPT>
	<style TYPE="text/css">
	.fitem label {
		margin-top: 0px;
	}
	td {
    height: 15px;    
	}
	.address td{height: 20px;}
	
	.button {
	   border-top: 1px solid #96d1f8;
	   background: #65a9d7;
	   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
	   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
	   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
	   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
	   background: -o-linear-gradient(top, #3e779d, #65a9d7);
	   padding: 2px 15px;
	   -webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
	   border-radius: 8px;
	   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
	   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	   box-shadow: rgba(0,0,0,1) 0 1px 0;
	   text-shadow: rgba(0,0,0,.4) 0 1px 0;
	   color: white;
	   font-size: 18px;
	   font-family: Georgia, serif;
	   text-decoration: none;
	   vertical-align: middle;
	   }
	.button:hover {
	   border-top-color: #28597a;
	   background: #28597a;
	   color: #ccc;
	   }
	.button:active {
	   border-top-color: #1b435e;
	   background: #1b435e;
	   }
	
	
	</style>
</head>
<body>

<div id="win" class="easyui-panel" title="Order" style="" data-options="modal:true, collapsible: false, minimizable: false, maximizable: false, closable: false">

	<table style="width:100%; padding: 5px; border: 0px; border-style: solid;">
		
		<tr>
			<td>
				<div id="customerPanel" class="easyui-panel" title="Customer Information" iconCls="icon-user" collapsible=true
						style="margin-right:0px;" >  
				 	
					<table style="width:100%; padding: 5px; border: 0px; border-style:solid;">
						<tr><td colspan="2">
						<!-- <fieldset style="background-color: #EBEBEB; border-color: #CCCCCC;">  -->
							<div class="fitem" style="padding-top: 10px; ">
							 	<table style="cellpadding: 0px; cellspacing: 0px; width:100%; border: 0px; border-style: solid;">
							 	<tr>
							 		<td style="padding-left:15px;" >
										<label style="padding-left:0px; width: 82px; border: 0px; border-style: solid;border-color: #000000">NAME:</label>
									 	${order.customerName}
							    	</td>
							    	<td>
							    		<label style="padding-left:20px; width: 43px; ">TEL:</label>
									    ${order.tel}
							    	</td>

							    	<td>
							    	<label style="padding-left:20px; width: 43px; ">EMAIL:</label>
									    ${order.email}
							    	</td>
							    	
							    	<td>
							    	<label style="padding-left:20px; width: 130px; ">EST. PICKUP DATE:</label>
									       <fmt:formatDate pattern="MMMM-dd-yyyy" value="${order.estPickupDate}" /> 
							    	</td>
							    </tr>
							    <tr>
							 		<td style="padding-left:15px;" >
							 		<label style="padding-left:0px; width: 82px;  border: 0px; border-style: solid;border-color: #000000" >CONTACT:</label>
									    ${order.contact}
							    	</td>
							    	<td>
							    		<label style="padding-left:20px; width: 43px;">FAX:</label>
									  ${order.fax}
									</td>
							    	<td>
							    	<label style="padding-left:20px; width: 43px; padding-top: 3px;">CELL:</label>
									    ${order.cell}
									</td>
									<td>
									</td>
							    </tr>
							    </table>
							    						    
							</div>
						<!-- </fieldset>  -->
				 		</td>
				 		</tr>
						
						<tr>
							<td width="50%">
							<fieldset>
								<legend>Billing Address</legend>
								<div class="fitem">
								<table class="address" style="width:100%; border: 0px; border-style: solid; padding: 0px;">
									<tr>										
										<td style="width: 100px;"><label>Address:</label></td>
										<td>${order.address1}</td>
									</tr>
									<c:if test="${not empty order.address2}">
									<tr>	
										<td> </td>
										<td>${order.address2}</td>
									</tr>
									</c:if>
									<tr>	
									<td></td>
										<td>
											${order.city},&nbsp;&nbsp;${order.state}&nbsp;${order.zip}
										
										</td>
									</tr>
								</table>
								</div>
							</fieldset>
							</td>
							<td width="50%">
								<fieldset>
									<legend>Shipping Address</legend>
									<div class="fitem">
								<table class="address" style="width:100%; padding: 0px; border:1px">
									<tr>										
										<td style="width: 120px;"><label>Shipping Address:</label></td>
										<td>${order.shipAddress1}</td>
									</tr>
									<c:if test="${not empty order.shipAddress2}">
									<tr>	
										<td> </td>
										<td>${order.shipAddress2}</td>
									</tr>
									</c:if>
									<tr>	
									<td></td>
										<td>
											${order.shipCity}<c:if test="${not empty order.shipCity}">,&nbsp;&nbsp;${order.shipState}</c:if>&nbsp;${order.shipZip}
										</td>
									</tr>
								</table>
								</div>
								</fieldset>
							</td>
						</tr>

					</table>

				</div>
			</td>
		</tr>
		
		<!-- start of order details -->

		<tr>
			<td>
			
			<div id="detailPanel" class="easyui-panel" title="Order Details" iconCls="icon-tshirt" collapsible=false style="margin-right:0px;" >  
			<div class="zzant_table" style="width:99.85%">
			    <table id="uploaded-files" style="height: 100%; ">
			        <tr>
			            <td>Style</td>
			          	<td>Product Description</td>
			            <td>Logo Description</td>
			            <td>Color</td>
			            <td>Size</td>
			            <td>Qty</td>
			            <td>unit Price</td>
			            <td style="text-align: right; padding-right: 20px;">SubTotal</td>
			        </tr>			          	
			        <c:forEach items="${order.garmentItems}" varStatus="s" var="item" >
						<tr id='<c:out value="${item.itemId}" />_row'>
							<td><c:out value="${item.styleNo}" /></td>
							<td style="width: 350px;"><c:out value="${item.desc}" /></td>
							<td><c:out value="${item.artDesc}" /></td>
							<td><c:out value="${item.color}" /></td>
							<td><c:out value="${item.size}" /></td>
							<td><c:out value="${item.qty}" /></td>							
							<td style="width: 100px;"><fmt:formatNumber type="currency" currencySymbol="$" value="${item.unitPrice}" /></td>
							<td style="text-align: right; padding-right: 20px; width: 85px;"><fmt:formatNumber type="currency" currencySymbol="$" value="${item.subTotal}" /></td>
 						</tr>
					</c:forEach>
					

					<tr>
						<td colspan="2" style="font-weight: bold;  vertical-align: top; text-align: left; border-bottom-width: 0px; padding-top: 10px; background-color: white;" ><label>Additional Comment:</label></td>
						<td colspan="4" style="vertical-align: top; font-weight: bold;  text-align: left; border-bottom-width: 0px; padding-top: 10px; background-color: white;" ><label>Terms and Conditions:</label></td>
			            <td rowspan="2" style="text-align: right; font-weight: bold; background-color: white;border-bottom-width: 0px; color: #686A6D;vertical-align: top;">Total Price:<br><br>Total Payment: <br><br>Balance:<br></td>
			          	<td rowspan="2"  style="text-align: right; padding-right: 20px; font-weight: bold; background-color: white; border-left-width: 1px; vertical-align: top;">
			          	<fmt:formatNumber type="currency" currencySymbol="$" value="${order.totalPrice}" /><br><br>
			          	<fmt:formatNumber type="currency" currencySymbol="$" value="${order.totalPayment}" /><br><br>
			          	<fmt:formatNumber type="currency" currencySymbol="$" value="${order.balance}" /><br>
			          	</td>
			        </tr>
			        <tr>
			        	<td rowspan="2" colspan="2"  style="text-align: left; vertical-align:top; background-color: white; border-bottom-width: 0px; color: #686A6D;">something ${order.comment}
			        	<td rowspan="2" colspan="4"  style="text-align: left; vertical-align:top; background-color: white; border-right-width: 1px; color: #686A6D; padding-top: 0px;" >
			        		<ul style="padding-top: 0px;">
							<li>Prices are subject to change without notice.</li>
							<li>50% Down Payment is required on all orders, balance upon picking up</li>
							<li>CANCELLATIONS will be charged for services performed and materials used. Orders in production may not be canceled.</li>
							<li>As it is not always possible to imprint the exact quantity ordered. It is agreed that an overrun or under run of not more than 5% to be billed pro rata, is acceptable as
							fulfillment of this order.</li>
							<li>All screens and embroidery tapes remain the sole property of Promo Advertising and AD Sales. If product is not picked up within 30 days of pickup date (above),
							customer will lose his/her deposit.</li>
							<li>Promo Advertising | AD Sales is not responsible for any trademark or copyright infringements incurred by customer.</li>
							</ul>
						</td>
			        </tr>
	        
			    </table>
			    </div>
    			</div>

			</td>
		</tr>

		
</table>

<div style="text-align: center; padding-top: 25px; padding-bottom: 25px;">
<button type="button" class="button" name="acceptButton" alt="Accept" >Approve Order</button>
<button type="button" class="button" name="acceptButton" alt="Accept" >Reply W/O Approval</button>
</div>

</div>

</body>
</html>